<%= container do |c| %>
  <% c.sidebar class: "order-first" do %>
    <h2>Tags</h2>
    <p>Tags can be rendered as a list of <code>&lt;span&gt;</code> or <code>&lt;a&gt;</code> tags.</p>
  <% end %>

  <div class="mb-2">
    <div class="tag-list">
      <span class="tag">Default</span>
      <span class="tag tag-primary">Primary</span>
      <span class="tag tag-secondary">Secondary</span>
      <span class="tag tag-success">Success</span>
      <span class="tag tag-danger">Danger</span>
      <span class="tag tag-warning">Warning</span>
      <span class="tag tag-info">Info</span>
      <span class="tag tag-light">Light</span>
      <span class="tag tag-dark">Dark</span>
      <span class="tag" style="--tag-bg: #8eec4d; --tag-color: #000">Custom</span>
    </div>
  </div>

  <div>
    <div class="tag-list">
      <a href="#" class="tag">Default</a>
      <a href="#" class="tag tag-primary">Primary</a>
      <a href="#" class="tag tag-secondary">Secondary</a>
      <a href="#" class="tag tag-success">Success</a>
      <a href="#" class="tag tag-danger">Danger</a>
      <a href="#" class="tag tag-warning">Warning</a>
      <a href="#" class="tag tag-info">Info</a>
      <a href="#" class="tag tag-light">Light</a>
      <a href="#" class="tag tag-dark">Dark</a>
      <a href="#" class="tag" style="--tag-bg: #8eec4d; --tag-color: #000">Custom</a>
    </div>
  </div>
<% end %>
